<%--
  Created by IntelliJ IDEA.
  User: vevive
  Date: 2020/10/9
  Time: 10:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <!--引入外部样式文件-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>

        #mainDiv{
            border:1px solid indianred;/*设置边框样式*/
            width:95%;
            padding: 0px;/* 内部填充距离 #f5c6cb*/
            background-color: #f5c6cb;
        }
        .my-header {
            border: 0px solid rosybrown;
            width:100%;
            height:165px;
            background-color: #f1b0b7;
            display: flex;/*设置当前DIV的显示模式为弹性布局模式*/
            flex-direction: row;
        }
        .my-header .logo-div{
            border: 0px solid red;
            width: 75%;
            height: 165px;
            text-align: center;
            line-height: 150px;
            font-family:"华文行楷";
            font-size: 100px;
        }
        .my-header .info-div{
            border: 0px solid red;
            width: 25%;
            height: 165px;
            text-align: center;/*设置文本对齐方式*/
            padding-top: 35px;/*设置顶部填充距离*/
        }

        .my-content{
            border: 0px solid rebeccapurple;
            width:100%;
        }
        .my-footer{
            border: 1px solid orange;
            width:100%;
            height:150px;
            background-color: #c6c8ca;
            text-align: center;
            line-height: 150px;
            font-size: 50px;
        }
        .my-content img{
            width: 300px;
            height: 300px;

        }
        div[class="card" ]:hover{
            cursor: pointer;/*设置鼠标样式为手掌*/
            color:mediumvioletred;
            border: 3px solid mediumorchid;
            /**
            参数1：水平位置（正数表示向右延伸）
            参数2：垂直位置（正数表示向下延伸）
            参数3：阴影距离
            参数4：阴影颜色
            */
            box-shadow: 20px 20px 20px #5a6268;/*设置盒子阴影效果*/

        }
    </style>
</head>
<body>

<div id="mainDiv" class="container-fluid" >
    <div class="my-header">
        <div class="logo-div"  >
            <h2 align="right" ></h2>
            ♕   day day up    牛奶购物平台
        </div>
        <div class="info-div">
            <c:choose>
                <c:when test="${sessionScope.user != null}">
                    <p style="font-size: 25px">☏☏☏热线电话：123-456-789</p><br/>
                    <p style="font-size: 20px"/>欢迎您!<span style="color: #1b1e21">${sessionScope.user.user_name}</span>

                    <a href="exit.do" class="btn btn-outline-danger" >退出</a>
                    <a href="/car/car.do?operate=queryCar" class="btn btn-dark " >购物车<span class="badge badge-pill badge-danger">${requestScope.count}</span></a>
                </c:when>
                <c:otherwise>
                    <p style="font-size: 25px">☏☏☏热线电话：123-456-789</p><br/>
                    <a href="login.html" id="regLink" class="btn btn-outline-danger btn-lg">登录</a>
                    <a href="register.html" id="regLink" class="btn btn-outline-danger btn-lg">注册</a>
                    <a href="/car/car.do?operate=queryCar" class="btn btn-dark">购物车</a>
                </c:otherwise>
            </c:choose>

        </div>
    </div>

    <!--内容区开始-->
    <div class="my-content">
        <c:forEach items="${requestScope.milkList}" var="milk" varStatus="status">
            <!--分组开始DIV-->
            <c:if test="${status.count%4==1}">
                <div class="card-deck my-3">
            </c:if>

                <!--卡片DIV开始-->
                <div class="card">
                    <a href="#">
                        <img src="img/milk/${milk.milk_image}" class="card-img-top" >
                    </a>

                    <div class="card-body">
                        <!--<h5 class="card-title">${milk.milk_name}</h5>
                        <h5 class="card-title">单价：${milk.milk_price}</h5>
                        <a href="addCar.do?milkId=${milk.milk_id}" class="btn btn-outline-success">加入购物车</a>
                        <a href="#" class="btn btn-danger">购买</a>-->

                        <c:choose>
                            <c:when test="${sessionScope.user != null}">
                               <h5 class="card-title">${milk.milk_name}</h5>
                               <h5 class="card-title">单价：${milk.milk_price}</h5>
                               <a href="/car/car.do?operate=addCar&milkId=${milk.milk_id}" class="btn btn-outline-success">加入购物车</a>
                               <a href="buy.jsp?total_price=${milk.milk_price}" class="btn btn-danger">购买</a>
                            </c:when>
                            <c:otherwise>
                               <h5 class="card-title">${milk.milk_name}</h5>
                               <h5 class="card-title">单价：${milk.milk_price}</h5>
                               <a href="/car/car.do?operate=addCar&milkId=${milk.milk_id}" class="btn btn-outline-success">加入购物车</a>
                                <a href="indicate.jsp" class="btn btn-danger">购买</a>
                            </c:otherwise>
                        </c:choose>

                    </div>
                </div>
                <!--卡片DIV结束-->
            </a>

             <!--分组结束DIV-->
                <c:if test="${status.count%4==0}">
                    </div>
                </c:if>

        </c:forEach>
    </div>
    <!--内容区结束-->

    <div class="my-footer">
        day day up 牛奶有限公司   2000-2020 &copy;
    </div>
</div>



<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>
<script src ="layer-v3.1.1/layer/layer.js"></script>
<script>

</script>
</body>
</html>
